<script setup lang="ts">
import { CarryOutOutlined, SmileTwoTone, FolderOpenOutlined } from '@ant-design/icons-vue'
import type { TreeProps } from 'ant-design-vue'
import results from './data'

interface FormState {
  value: string
  theme: string
  keyword: string
}
const formState = reactive<FormState>({
  value: '',
  theme: '',
  keyword: ''
})

const showLine = ref<boolean>(true)
const showIcon = ref<boolean>(false)
const treeData = ref<TreeProps['treeData']>([
  {
    title: '食品卫生安全',
    key: '100',
    children: [
      {
        title: '食品生产安全',
        key: '101',
      },
      {
        title: '食品销售与服务',
        key: '102',
      },
      {
        title: '食品质量检测',
        key: '103',
      }
    ]
  },
  {
    title: '环境安全',
    key: '200',
    children: [
      {
        title: '工业环境保护',
        key: '201',
      },
      {
        title: '城市环境管理',
        key: '202',
      },
      {
        title: '自然资源保护',
        key: '203',
      }
    ]
  },
  {
    title: '教育安全',
    key: '300',
    children: [
      {
        title: '校园安全管理',
        key: '201',
      },
      {
        title: '学生安全教育',
        key: '302',
      },
      {
        title: '校园紧急响应机制',
        key: '303',
      }
    ]
  },
  {
    title: '网络与信息安全',
    key: '400',
    children: [
      {
        title: '网络安全教育',
        key: '401',
      },
      {
        title: '学生个人信息保护',
        key: '402',
      },
      {
        title: '网络欺凌防范',
        key: '403',
      }
    ]
  }
])
const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
  console.log('selected', selectedKeys, info)
}

const columns = [
  {
    title: '舆情事件',
    dataIndex: 'title',
    width: '20%'
  },
  {
    title: '发生时间',
    dataIndex: 'time',
    width: '20%'
  },
  {
    title: '线索数量',
    dataIndex: 'count'
  },
  {
    title:'舆情级别',
    dataIndex:'level'
  },
   {
    title:'事件来源',
    dataIndex:'source'
  },
   {
    title:'舆情专题',
    dataIndex:'subject'
  },
   {
    title:'事件详情',
    dataIndex:'detail'
  },
]
</script>

<template>
  <div>
    <a-form
      :model="formState"
      name="horizontal_login"
      layout="inline"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item label="日期：" name="username">
        <a-input v-model:value="formState.date"> </a-input>
      </a-form-item>
      <a-form-item label="主题：" name="password">
        <a-input v-model:value="formState.theme"> </a-input>
      </a-form-item>
      <a-form-item label="关键词：" name="password">
        <a-input v-model:value="formState.keyword"> </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>
    <a-row>
      <a-col :span="5">
        <a-tree
          :show-line="showLine"
          :show-icon="showIcon"
          :tree-data="treeData"
          :defaultExpandAll="true"
          :multiple="true"
          @select="onSelect"
        >
          <template #icon><carry-out-outlined /></template>
          <template #title="{ dataRef }">
            <template v-if="dataRef.key === '0-0-0-1'">
              <div>multiple line title</div>
              <div>multiple line title</div>
            </template>
            <template v-else>{{ dataRef.title }}</template>
          </template>
          <template #switcherIcon="{ dataRef, defaultIcon }">
            <FolderOpenOutlined
              :is="defaultIcon"
              style="color: #edaa13"
            />
          </template>
        </a-tree>
      </a-col>
      <a-col :span="19">
        <a-table :columns="columns" :data-source="results" :loading="loading" :pagination="false">
          <!-- <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">{{ text.first }} {{ text.last }}</template>
          </template> -->
        </a-table>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="scss" scoped></style>
